<template>
	<van-empty description="暂无匹配" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
		v-if="list.length == 0" style="width: 100vw;" />
	<scroll-view scroll-y="true" style=" height: 100vh" @scrolltolower="lowerBottom" v-else refresher-enabled="true"
		:refresher-triggered="triggered" @refresherrefresh="onRestore">
		<view class="meslist" v-for="(item, index) in list" :key="item.userid">
			<div class="mes_card">
				<div class="mes_card_top">
					<div style="padding-top: 20px;padding-left: 20px;" class="decription">
						<img width="20" height="20"
							src="https://obscloud.ulearning.cn/resources/web/17138858891083214.png">
						<div class="title">
							<p> {{ item.title.substring(0, 20) }}</p>
						</div>
						<view class="type">
							<view class="action">
								<view class="cu-tag round bg-orange light">{{ item.types }}</view>
							</view>
						</view>
					</div>
				</div>
				<div class="mes_card_body">
					<div>
						<img :src="item.img" class="headimg" />
					</div>
					<div>
						<div class="card_content">
							{{ item.content.substring(0, 10) }}
						</div>
					</div>
				</div>
				<div class="mes_card_bottom">
					<view @click="showdetail(item.mesid)" style="margin-right: 4vw;"><van-icon size='1.2rem'
							name="todo-list-o" /></view>
					<view @click="showFreind(item.mesid)" style="margin-right: 4vw;"><van-icon size='1.2rem'
							name="friends" /></view>
					<p style="color: #0081ff;">{{ item.time}}</p>
				</div>
			</div>
		</view>
		<!-- <view class="meslist" v-for="(item,index) in list" :key="item.userid">
			<view class="mes">
				<img :src="item.img" alt="" class="headimg" />
				<view>
					<view class="Con">
						<view class="TitleAndContent">
							<h2 class="title"> {{item.title.substring(0,20)}} </h2>
							<view class="content">
								{{ item.content.substring(0,10) }}
							</view>
						</view>
						<view class="btn">
							<view @click="showdetail(item.mesid)"><van-icon name="todo-list-o" /></view>
							<view @click="showFreind(item.mesid)"><van-icon name="friends" /></view>
						</view>
					</view>
					<view class="timeAndType">
						<view class="time">
							{{item.time.substring(0,10)}}
						</view>
						<view class="type">
							<view class="action">
								<view class="cu-tag round bg-orange light">{{item.types}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</scroll-view>
</template>

<script>
import mes from '@/modul/Aboutme/match_history_mes.vue'
import {
	getMymatch
} from '@/store/api.js'
import {
	truncateString
} from '@/store/constants.js'
export default {
	mounted() {
		let data = {
			pageNum: 1,
			pageSize: 20
		}
		getMymatch(data).then((res) => {
			console.log(res)
			this.num++
			this.total = res.data.data.total
			res.data.data.rows.forEach(item => {
				let types = ''
				item.tags.forEach(it => {
					types = types + '#' + it.name
				})
				console.log(typeof(item.beginTime))
				this.list.push({
					img: item.posterAvatar,
					title: item.title,
					content: truncateString(item.content),
					userid: item.posterId,
					mesid: item.id,
					time: item.beginTime.substring(0,10),
					types: types
				})
			})
		}).catch(err => {
			console.log(err)
		})
	},
	components: {
		mes
	},
	data() {
		return {
			triggered: false,
			num: 1,
			total: 0,
			list: []
		}
	},
	methods: {
		onRestore() {
			this.triggered = true
			this.num = 1
			this.total = 0
			this.list = []
			let data = {
				pageNum: 1,
				pageSize: 20
			}
			getMymatch(data).then((res) => {
				console.log(res)
				this.num++
				this.total = res.data.data.total
				res.data.data.rows.forEach(item => {
					let types = ''
					item.tags.forEach(it => {
						types = types + '#' + it.name
					})
					this.list.push({
						img: item.posterAvatar,
						title: item.title,
						content: truncateString(item.content),
						userid: item.posterId,
						mesid: item.id,
						time: item.beginTime,
						types: types
					})
				})
			}).catch(err => {
				console.log(err)
			})
			setTimeout(() => {
				this.triggered = false
			}, 1000)
		},
		lowerBottom() {
			if (this.total > this.list.length) {
				let data = {
					pageNum: this.num,
					pageSize: 20
				}
				getMymatch(data).then((res) => {
					console.log(res)
					this.num++
					res.data.data.rows.forEach(item => {
						this.list.push({
							img: item.posterAvatar,
							title: item.title,
							content: truncateString(item.content),
							userid: item.posterId,
							mesid: item.id,
							time: item.beginTime
						})
					})
				}).catch(err => {
					console.log(err)
				})
			}
		},
		showFreind(mesid) {
			uni.navigateTo({
				url: `/subpkg/Match_friend/Match_friend?id=${mesid}`
			})
		},
		showdetail(mesid) {
			uni.navigateTo({
				url: `/subpkg/mes_detail/mes_detail?id=${mesid}`
			})
		}

	}
}
</script>

<style scoped lang="less">
.Con {
	width: 70vw;
	display: flex;
}

.meslist {
	position: relative;
	z-index: 1;
	margin-block-start: 20rpx;
}

@media screen and (min-width: 1200px) {}

.decription {
	display: flex;
	justify-content: space-between;
	padding-right: 20px;
}

.card_content {
	padding: 20px;
}

.mes_card {
	width: 94%;
	// margin: 3%;
	margin-left: 10px;
	margin-right: 10px;
	background-color: #fff;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-bottom: 20px;
}

.mes_card_top {
	width: 100%;
	margin-bottom: 20px;

}

.mes_card_bottom {
	width: 100%;
	display: flex;
	justify-content: end;
	padding-right: 20px;
	padding-top: 20px;
	align-items: center;
}

.mes_card_body {
	width: 90%;
	padding: 10%;
	display: flex;
	justify-content: start;
	flex-direction: row;
	background-color: #f3f7fa;
	padding: 10px;
	align-items: center;
	align-content: center;
	border-radius: 5px;

}

.meslist {
	position: relative;
	z-index: 1;
	padding: 18rpx;
}

/* 单个卡片 */
.mes {
	align-items: center;
	z-index: 5;
	display: flex;
	border-radius: 10rpx;
	padding-top: 3vh;
	padding-bottom: 3vh;
	box-shadow: 1px 3px 5px 3px #888888;
	background-color: #fefefe;
	margin: 15rpx;
}

.headimg {
	width: 60px;
	height: 60px;
	margin-left: 6rpx;
	border-radius: 10px;
	// margin-bottom: 10rpx;
}

.content {
	width: 490rpx;
	font-size: 40rpx;
	-webkit-line-clamp: 2;
	margin-left: 15rpx;

}

.title {
	font-weight: 600;
	font-size: 35rpx;
	margin-left: 40rpx;
}

.bg {
	width: 100%;
	height: 74%;
	z-index: 0;
	position: absolute;
}

.status {
	// margin-top: -15rpx;
	font-size: small;
	margin-right: 5rpx;
}
</style>